<template>
	<view  :style="viewColor">
		<view class="hd is-advisor-ab">
			
			<view @click="changeTab(item.index)" v-for="(item, index) in tabList" :key="index" :class="item.index==tabindex?'on':''" class="item  display-flex-column">
				<view class="title">
					{{item.title}}
				</view>
				<view class="subtitle">
					{{item.subTitle}}
				</view>
				<view class="line"></view>
				<view v-if="index == 1" class="tab-bg1"></view>
				<view v-if="index == 0" class="tab-bg2"></view>
			</view>
		</view>
		<view class="bg-white mr-10 ml-10" style="">
			<view class="" >
				<view class=" display-flex display-flex-align-center  mb-15">
					<view class="text-16 text-black ft-w600 mr-15">目的地</view>
					<!-- <view  class="flex-1  text-black text-14">
					  <input  v-model="form.destination"   placeholder="请输入您想去哪儿"/>
					</view> -->
					<view @click="goselAdd(2)" style="flex: 1;" >
						<view class="display-flex display-flex-align-center address-input" style="height:44px;">
							<view v-if="form.destination" class="text-ellipsis color-999" style="font-size:26upx;color: #121212;width: 200px;">{{form.destination}}</view>
							<view v-else class=" color-999" style="font-size:26upx;">请输入您想去哪儿</view>
						</view>
					</view>
				</view>
				<view class="separate-line"></view>
				<view @click="openDate" class=" display-flex display-flex-align-center mt-15 mb-15">
					<view class="text-16  text-black ft-w600 mr-15">出发日期</view>
					<view v-if="form.go_time"  class="flex-1 text-black text-14">
				       <text >{{form.go_time}}</text>
					</view>
					<view v-else class="flex-1   text-14 " style="color: #848484;">
						选择出发日期
					</view>
				</view>
				<view class="separate-line"></view>
				<view class=" display-flex display-flex-align-center mt-15 mb-15">
					<view class="text-16 text-black ft-w600 mr-15">出行人数</view>	
					<view  class="flex-1  text-black text-14">
					  <input  v-model="form.people_sum" type="number"  placeholder="请输入出行人数"/>
					</view>
				</view>
				<view class="separate-line"></view>
				<view class=" display-flex display-flex-align-center mt-15 mb-15">
					<view class="text-16 text-black ft-w600 mr-15">出行天数</view>
					<view  class="flex-1  text-black text-14">
					  <input  v-model="form.days" type="number"  placeholder="请输入出行天数"/>
					</view>
				</view>
				<view class="separate-line"></view>
				<view class=" display-flex display-flex-align-center mt-15 mb-15">
					<view class="text-16 text-black ft-w600 mr-15">联系方式</view>
					<view  class="flex-1  text-black text-14">
					  <input  v-model="form.phone" type="number" maxlength="11" placeholder="请输入联系方式"/>
					</view>
				</view>
				<view class="mt-15 mb-10">
					<view class="button-search" @click="submitTrip">
						<text class="text">提交需求</text>
					</view>
				</view>
			</view>
		</view>
		<view class="pd-12 br-10 bg-color-eee ">
			<view class="text-16 text-black ft-w700 mb-15 text-align-center">
				定制流程
			</view>
			<view class="display-flex display-flex-align-center display-flex-justify-center mb-15">
				<view class="display-flex-column display-flex-justify-center display-flex-align-center dz-block">
					<view class="dz-img display-flex display-flex-justify-center display-flex-align-center mb-5">
						<view class="iconfont icon-icon-pencil">	
						</view>
					</view>
					<view class="text-12">
						填写需求
					</view>
				</view>
				<view class="dz-dash" ></view>
				<view class="display-flex-column display-flex-justify-center display-flex-align-center dz-block">
					<view class="dz-img display-flex display-flex-justify-center display-flex-align-center mb-5">
						<view class="iconfont icon-fenzu">	
						</view>
					</view>
					<view class="text-12">
						设计行程
					</view>
				</view>
				<view class="dz-dash" ></view>
				<view class="display-flex-column display-flex-justify-center display-flex-align-center dz-block">
					<view class="dz-img display-flex display-flex-justify-center display-flex-align-center mb-5">
						<view class="iconfont icon-fukuan">	
						</view>
					</view>
					<view class="text-12">
						合作付款
					</view>
				</view>
				<view class="dz-dash"></view>
				<view class="display-flex-column display-flex-justify-center display-flex-align-center dz-block">
					<view class="dz-img display-flex display-flex-justify-center display-flex-align-center mb-5">
						<view class="iconfont icon-7">	
						</view>
					</view>
					<view class="text-12">
						开心出行
					</view>
				</view>
			
			</view>
			<view @click="openDzDetail" style="color: var(--view-theme);" class=" text-12 display-flex display-flex-align-center display-flex-justify-center">
				<text>了解私人定制服务</text>
				<text class="iconfont icon-ic_right"></text>
			</view>
		</view>
		
		<uni-popup ref="bindmobile" type="bottom" background-color="#fff">
			<scroll-view scroll-y  style="height: 500px;margin-bottom: 100px;">
				<calendar :salesDates="dateList" :start-date="selectDay" @callback="dateChange" @colseCal="colseCal">
				</calendar>
			</scroll-view>
		</uni-popup>
		<uni-popup ref="dzdetail" type="bottom" background-color="#fff">
			<view class="bg-white br-8" >
				<view class="popup-header">
					<view class="popup-title">
						定制游服务流程
					</view>
					<view @click="colseDzDetail" class="popup-close1 iconfont icon-ic_close text-18">	</view>
				</view>
				<scroll-view scroll-y style="height: 500px;margin-bottom: 100px;">
					<view class="return-bock pd-12">
						<view>
							<view class="">
							  <text class="text-black ft-w700">1.提交出行需求</text>
							</view>
							<view class="mt-5">
								<text class="text-14">您可根据页面提示，填写出行需求和留下联系方式</text>
							</view>
						</view>
						<view>
							<view class="mt-15">
							  <text class="text-black ft-w700">2.匹配定制师</text>
							</view>
							<view class="mt-5">
								<text class="text-14">系统将根据您的出行需求为您匹配定制师，定制师在接单后会尽快联系您,请您耐心等待</text>
							</view>
						</view>
						<view>
							<view class="mt-15">
							  <text class="text-black ft-w700">3.设计出行方案</text>
							</view>
							<view class="mt-5">
								<text class="text-14">定制师将根据您的出行需求，初步拟定相应的出行方案</text>
							</view>
						</view>
						<view>
							<view class="mt-15">
							  <text class="text-black ft-w700">4.确定出行方案</text>
							</view>
							<view class="mt-5">
								<text class="text-14">定制师会与您沟通，敲定出行方案细节，双方确定最终方案</text>
							</view>
						</view>
						<view>
							<view class="mt-15">
							  <text class="text-black ft-w700">5.报价与支付</text>
							</view>
							<view class="mt-5">
								<text class="text-14">定制师根据最终确定的出行方案进行报价，您需在订单交易时间内完成订单支付</text>
							</view>
						</view>
						<view>
							<view class="mt-15">
							  <text class="text-black ft-w700">6.平台服务</text>
							</view>
							<view class="mt-5">
								<text class="text-14">平台将提供7*24小时服务至行程结束</text>
							</view>
						</view>
					</view>
				</scroll-view>	
				
			</view>
		</uni-popup>
		
						
	</view>
</template>

<script>
	import Cache from '@/utils/cache';
	import { CITY_INFO ,FROM_LOC ,TO_LOC ,USER_LOCATION} from '@/config/cache'
	import { getCityInfo} from '@/api/api.js';
	import dayjs from '@/utils/day.js'
	import util from '@/utils/util.js'
	import { getUserInfo } from '@/api/user.js';
	import { saveDingzhi } from "@/api/api.js"
	import calendar from '@/components/calendar/index'
	import { configMap, getCustomer } from "@/utils";
	import recommend from '@/components/recommend';
	import { mapGetters } from "vuex";
	
	let app = getApp();
export default {
	

name: "tabScenic",
components:{ calendar },
 computed: configMap({recommend_switch:0},mapGetters(['isLogin','viewColor'])),
data() {
    return {
		selectDay: '',
	  dateList: [],
	   tabindex: 1,
	  tabList: [
	  	{
	  		title: '个人定制',
	  		subTitle: '亲子·蜜月·好友',
	  		index: 1
	  	},
	  	{
	  		title: '团建/公司定制',
	  		subTitle: '大团·素拓·会务',
	  		index: 2
	  	}
	  ],
	  form: {
	  	type:'',
	  	destination: '',
	  	go_time: '',
	  	people_sum: '',
	  	name: '',
	  	phone: '',
	  	days: '',
	  },
	  userInfo: '',
    }
  },
  props: {
  	isOnShow: {
  		type: Boolean
  	} ,
  },
  watch: {
  
  	
  	isOnShow:{
  		handler(nVal,oVal){
  			console.log('nVal',nVal)
  			this.initValue()
  		},
  		immediate: true,
  		deep:true
  	}
  },
  mounted() {
	  const tow = dayjs().add(1, 'day');
	  this.selectDay = tow.format('YYYY-MM-DD')
	  this.selectDayMd =  tow.format('MM月DD日')
	  this.selectDayWeek =  util.getWeek(tow.day())
	  this.form.go_time = this.selectDay;
	  console.log(this.selectDay,this.selectDayMd,this.selectDayWeek)
	  	
	  
	  if (this.isLogin) {
	  	this.getUserInfo();
	  } 
	},
  methods: {
	  initValue(){
		this.form.destination = uni.getStorageSync("end_dingzhi")?uni.getStorageSync("end_dingzhi"):"";
	  },
	/**
	 * 获取用户详情
	 */
	getUserInfo: function() {
		let that = this;
		getUserInfo().then(res => {
			that.$set(that, 'userInfo', res.data);
			if(res.data.phone){
				this.form.phone = res.data.phone;
			}
		});
	},
	changeTab(index){
		this.tabindex = index;
	},
	goselAdd(type){
		uni.navigateTo({
			url: '/pages/bus/search_address/index?op=dingzhiIndex&&type='+type
		})
		
	},
	submitTrip(){
		
		this.form.type = this.tabindex
		
		// if(!this.form.origin){
		// 	return this.$util.Tips({
		// 		title: '请选择出发地'
		// 	}); 
		// }
		if(!this.form.destination){
			return this.$util.Tips({
				title: '请选择目的地'
			}); 
		}
		if(!this.form.go_time){
			return this.$util.Tips({
				title: '请选择去程时间'
			}); 
		}
		// if(!this.form.back_time&&this.current==1){
		// 	return this.$util.Tips({
		// 		title: '请选择返程时间'
		// 	}); 
		// }
		// if(!this.form.car_type){
		// 	return this.$util.Tips({
		// 		title: '请选择车辆类型'
		// 	}); 
		// }
		if(!this.form.people_sum){
			return this.$util.Tips({
				title: '请输入出行人数'
			}); 
		}
		if(!this.isValidPositiveInteger(this.form.people_sum)){
			return this.$util.Tips({
				title: '请输入正确出行人数'
			}); 
		}
			
		// if(!this.form.name){
		// 	return that.$util.Tips({
		// 		title: '请输入联系人姓名'
		// 	}); 
		// }
		if(!this.form.phone){
			return this.$util.Tips({
				title: '请输入联系人手机号'
			}); 
		}
		const regex = /^1[3456789]\d{9}$/;//使用此正则即可
		if (!regex.test(this.form.phone)){
			return this.$util.Tips({
				title: '请输入联系人正确手机号'
			}); 
		}
		
		if(!this.form.days){
			return this.$util.Tips({
				title: '请选择出行天数'
			}); 
		}
		if(!this.isValidPositiveInteger(this.form.days)){
			return this.$util.Tips({
				title: '请输入正确出行天数'
			}); 
		}
			
		
		uni.showLoading({ title: '请稍后' });
		saveDingzhi(this.form).then(res => {
			this.$util.Tips({
				title: '提交成功'
			}); 
			uni.hideLoading()
			uni.navigateTo({
				url:"/pages/bus/dingzhi/order_list",
			})
		}).catch(err => {
			console.log('err',err)
			uni.hideLoading()
			return this.$util.Tips({
				title: err
			}); 
		})
	},
	
	isValidPositiveInteger(str) {  
	    const regex = /^\d+$/;  
	    return regex.test(str);  
	} ,
	
	openDzDetail(){
		this.$refs.dzdetail.open()
	},
	colseDzDetail(){
		this.$refs.dzdetail.close()
	},
	openDate(){
		console.log('this.$refs.bindmobile',this.$refs)
		this.$refs.bindmobile.open()
	},
	colseCal(){
		this.$refs.bindmobile.close()
	},
	dateChange:function(date){
		var that = this;
		// this.selectDay = date.startStr.dateStr;	
		console.log('this.date',date)
		
		this.selectDay =  date.startStr.dateStr
		// this.selectDayMd =  dayjs(this.selectDay).format('MM月DD日')
		// this.selectDayWeek =  util.getWeek(dayjs(this.selectDay).day())
		
	    this.form.go_time = date.startStr.dateStr;
		this.$refs.bindmobile.close()
	},
	gotoOrderList(){
		if(!this.isLogin){
			toLogin()
		} else {
			uni.navigateTo({
				url: "/pages/bus/dingzhi/order_list"
			})
		}
		
	},
	
   
  }
}
</script>

<style  lang="scss">

	
	.is-advisor-ab{
		// background-color: #fff;
		background-color: hsla(0, 0%, 100%, 0.7);
		backdrop-filter: blur(15px);
		border-radius: 6px 6px 0 0;
		height: calc(100% - 4px);
		
	}
	.hd{
		// border-radius: 8px 8px 0 0;
		height: 60px;
		position: relative;
		// margin: -20px 15px 0 15px;
		z-index: 3;
		display: flex;
		flex-direction: row;
		justify-content: center;
		
	}

	.is-advisor-ab .item{
		justify-content: center;
		align-items: center;
		width: 50%;
		padding: 12px 0;
		color: #000;
	}
	.is-advisor-ab .item.on {
	   color: var(--view-theme);
		// top: -4px;
		// background: #FFF;
		// padding-top: 20px;
		// position: relative;
	}
	
	// .is-advisor-ab .item.on .title:not(.overseas-title):before {
	//     background: #006ff6;
	//     content: "" !important;
	//     display: block;
	//     position: absolute;
	//     width: 40px;
	//     height: 2px;
	//     border-radius: 2px;
	//     right: 15%;
	//     transform: translateX(-50%);
	//     bottom: 4px;
	// }
	.is-advisor-ab .item.on .line{
		opacity: 1;
		height: 2px;
		margin-top: 7px;
		margin-bottom: 5px;
		width: 40px;
		background-color: var(--view-theme);
		border-radius: 3px;
		position: absolute;
		top: 44px;
	}

	.is-advisor-ab .title{
		font-size: 14px;
		line-height: 19px;
		font-weight: 600;
		margin-bottom: 2px;
		
	}
	.is-advisor-ab .subtitle{
		line-height: 11px;
		font-size: 10px;
	}
	.dz-block{
		width: 60px;
	}
	
	.dz-img{
		width: 35px;
		height: 35px;
		border: 1px solid var(--view-theme);
		border-radius: 50%;
		color: var(--view-theme);
	}
	.dz-dash{
		// widt h: 50px;
		border-bottom: 1px dashed #000;
		// width: 100%;
		width: 50px;
		/* margin: 0 10px; */
		// margin-left: 10px;
		// margin-right: 10px;
		margin-bottom: 20px;
	}
</style>